import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import './AddTreeNode.less';
import { FormControl, Button, Row, Col} from 'tinper-bee';
import { vendorsDanger as danger, vendorsSuccess as success } from 'utils/config.js';

export default class AddTreeNode extends Component {
	constructor(props){
		super(props);
		this.state={
			name: '',
			code: '',
			item: this.props.item,
			posLength: this.props.posLength, //根据该属性判断添加同级时的层级
			parentKey: this.props.item ? this.props.item.key : '',
			isSameLevel: this.props.isSameLevel // 是否同级添加
		};
	}
	componentWillReceiveProps (nextProps) {
		let _me = this;
		this.setState({
			item: nextProps.item
		});
	}
	handlerGetCode = (prelen,e) => {
		var codeReg=/^[a-zA-Z0-9_-]+$/i;
		var patternReg = /[^a-zA-Z0-9_-\u4e00-\u9fa5]/g;
		if (codeReg.test(e.target.value)) {
			if(e.target.value.length + prelen > 20){
				danger({'text': '请限制在20个字符之内！'});
				this.setState({
					'code': e.target.value.substring(0,20-prelen)
				});
			} else {
				this.setState({
					'code': e.target.value
				});
			}
		} else {
			if(e.target.value.length + prelen> 20){
				danger({'text': '长度错误：请限制在20个字符之内！, 内容错误：只支持英文、数字、中下划线'});
				this.setState({
					'code': e.target.value.substring(0,20-prelen).replace(patternReg, '')
				});
			} else {
				if(e.target.value.length === 0){
					this.setState({
						'code': e.target.value
					});
				} else {
					danger({'text': '内容错误：只支持英文、数字、中下划线'});
					this.setState({
						'code': e.target.value.replace(patternReg, '')
					});
				}
			}
		}
	}
	handlerGetName = (e) => {
		if (e.target.value.length > 50) {
			danger({'text': '请限制在50个字符之内！'});
			this.setState({
				name: e.target.value.substring(0,50)
			});
		} else {
			this.setState({
				name: e.target.value
			});
		}
	}
	handlerClose = () => {
		let onClose = this.props.onClose;
		onClose(this.props.level, false);
	}
	handlerAdd = () => {
		let _me = this;
		let onAdd = this.props.onAdd;
		if(this.props.item){
			onAdd({
				name: this.state.name.trim(),
				code: this.state.item.key + this.state.code
			}, this.props.level, this.state.item, function () {
				_me.setState({
					name: '',
					code: ''
				});
			});
		}else{
			onAdd({
				name: this.state.name.trim(),
				code: this.state.code
			}, this.props.level, this.state.item, function () {
				_me.setState({
					name: '',
					code: ''
				});
			});
		}
	}
	//添加同级
	handlerSameAdd = () => {
		let _me = this;
		let onAdd = _me.props.onAdd;
		let posLength = _me.state.posLength;
		let currentLevel = posLength == 3 ? 'second' : 'third';
		onAdd({
			name: _me.state.name.trim(),
			code: _me.state.item.pcode + _me.state.code, // 父级code + 当前编码
			isSameLevel: _me.state.isSameLevel
		}, currentLevel, _me.state.item, function () {
			_me.setState({
				name: '',
				code: '',
				isSameLevel: _me.state.isSameLevel
			});
		});
	}
	render(){
		let prelen=0;
		if(this.state.parentKey){
			prelen=(this.state.isSameLevel ? this.state.item.pcode : this.state.parentKey).length;
		}
		return(
			<div className={ "tree-node__weight clearfix " + this.props.className}
				 style={{'marginLeft': this.state.isSameLevel ? '0' : '22'}}>{/* 使用this.state.isSameLevel控制样式，使其显示为同级添加样式 */}
				<i className="point fl"></i>
				<div className="clearfix fl weight__form">
					<i style={{'display':this.state.parentKey ? 'block':  'none'}}>{ this.state.isSameLevel ? this.state.item.pcode : this.state.parentKey}</i>
					<FormControl placeholder="编码" className="fl weight--width-80 input-border-format"
					 onChange={this.handlerGetCode.bind(null,prelen)}
					 value={this.state.code}/>
				</div>
				<div className="clearfix fl weight__form">
					<FormControl placeholder="名称" className="fl weight--width-120 input-border-format"
					onChange={this.handlerGetName}
					value={this.state.name}/>
				</div>
				<span onClick={this.handlerAdd} style={{'display':this.state.isSameLevel ? 'none':  'block'}} className="fl weight__button-confirm"></span>
				<span onClick={this.handlerSameAdd} style={{'display':this.state.isSameLevel ? 'block':  'none'}} className="fl weight__button-confirm"></span>
				<span onClick={this.handlerClose} className="fl weight__button-cancel"></span>
			</div>
		)
	}
}

AddTreeNode.PropTypes = {
	onClose: PropTypes.func,
	onAdd: PropTypes.func,
	className: PropTypes.string,
	isSameLevel: PropTypes.bool,
	posLength: PropTypes.number
}